<template>
    <el-tooltip content="返回顶部" placement="top">
        <el-button class="scroll-to-top" circle @click="scrollToTop">
            <el-icon class="el-icon-top">
                <ArrowUp />
            </el-icon>
        </el-button>
    </el-tooltip>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { ArrowUp } from '@element-plus/icons-vue';

// 定义滚动到顶部的方法
const scrollToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
    });
};

// 可选：控制按钮的显示和隐藏
const isVisible = ref(false);

onMounted(() => {
    window.addEventListener('scroll', handleScroll);
});

const handleScroll = () => {
    isVisible.value = window.scrollY > 200; // 当滚动超过300px时显示按钮
};

// 清理事件监听器
onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
.scroll-to-top {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease;
    opacity: v-bind('isVisible ? 1 : 0');
}

.scroll-to-top:hover {
    background-color: #0056b3;
}

.scroll-to-top .el-icon-top {
    font-size: 24px;
    /* 调整图标的大小 */
}
</style>